<template>
  <div class="m-member-list">
    <!-- 搜索条件 -->
    <div class="m-search-options">
      <div class="o">
        <span class="title">注册时间</span>
        <div class="date dis-block">
          <div>
            <w-date-picker language="ch" placeholder="起始时间" v-model="queryParams.startTime"></w-date-picker>
          </div>
          <span class="icon">—</span>
          <div>
            <w-date-picker language="ch" placeholder="结束时间" v-model="queryParams.endTime"></w-date-picker>
          </div>
        </div>
      </div>
      <div class="o">
        <span class="title">昵称</span>
        <div class="input dis-block">
          <w-input :holder='`请填写`' v-model="queryParams.nickName"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">姓名</span>
        <div class="input dis-block">
          <w-input :holder='`请填写`' v-model="queryParams.trueName"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">手机号码</span>
        <div class="input dis-block">
          <w-input :holder='`请填写`' v-model="queryParams.mobile"></w-input>
        </div>
      </div>
      <!-- <div class="o">
        <span class="title">会员类型</span>
        <div class="o-select dis-block">
          <w-select :options='memberType' v-model="queryParams.vipRole"></w-select>
        </div>
      </div> -->
      <!-- 查询按钮 -->
      <div class="order-options">
        <w-button @on-click='changePage(1)'>查询</w-button>
        <w-button type="option" style="margin-left: 30px" @on-click="onExportList">导出</w-button>
      </div>
    </div>

    <!-- 搜索列表 -->
    <div class="m-search-list">
      <div style="margin: 10px">
        <w-checkbox v-model="allChecked" :label='`all`' @on-change='changeAllMemberStatus'>
          <span>全选</span>
        </w-checkbox>
        <w-button class="list-btn" @on-click='disablePanel("1")'>禁用</w-button>
        <w-button class="list-btn" type="option" @on-click='disablePanel("2")'>永久删除</w-button>
      </div>
      <!-- <status-item :search-btns="statusList"></status-item> -->
      <div class="m-list">
        <div style="margin-bottom: 20px">
          <w-table :columns="columns"></w-table>
        </div>
        <!-- 列表数据 -->
        <div class="list" v-if='memberList.totalCount'>
          <table class="table" v-for='(val, index) in memberList.recordList' :key="index">
            <tr>
              <td colspan="7">
                <div class="login-info clearfix">
                  <div class="fl">
                    <w-checkbox v-model='val.isChecked' @on-change='changeCheckedStatus' :label='val.id'></w-checkbox>
                    <span>注册时间：{{val.addTimeString}}</span>
                    <span>最后登录时间：{{val.loginDateString || '--'}}</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="shop-info clearfix">
                  <div class="shop-logo fl">
                    <img v-lazy="val.userHeadImg" alt="">
                  </div>
                  <div class="shop-name">
                    <div class="name p-line-hide">姓名：{{val.userName}}</div>
                    <div class="shop-num">手机号：{{val.mobile}}</div>
                  </div>
                </div>
              </td>
              <td>
                <span>{{val.nickName || '--'}}</span>
              </td>
              <td>
                <span>{{val.vipRole == 'REGULAR' ? '普通会员' : '其他'}}</span>
              </td>
              <td>
                <span>{{val.loginCount || '--'}}</span>
              </td>
              <td>
                <span>{{val.storeRole == 'SELLER' ? '是' : '否'}}</span>
              </td>
              <!-- <td>
                <span class="cur" style="color: rgba(74,144,226,1)">查看</span>
              </td> -->
              <td>
                <div class="tab-option" @click="resetPwd = true; resetParams.mobile = val.mobile">重置密码</div>
                <!-- <div class="tab-option" @click="resetPhone = true">修改手机号</div> -->
              </td>
            </tr>
          </table>
        </div>
        <div class="list" style='text-align:center;' v-if='!memberList.totalCount'>
          暂无数据
        </div>
      </div>
      <div class="options-btn clearfix" v-if='memberList.pageCount > 1'>
        <div class="fr">
          <w-paging :current="memberList.currentPage" :total="memberList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>
    </div>

    <!-- 重置密码弹框 -->
    <w-panel-fixed-wrap v-model="resetPwd" :panel-title="true" title="重置密码" :width="`300px`" :height="`254px`" @on-confirm='submitReset'>
      <div class="reset-pwd-panel">
        <span>确定要重置密码？</span>
      </div>
    </w-panel-fixed-wrap>

    <!-- 重新绑定手机号-->
    <w-panel-fixed-wrap v-model="resetPhone" :panel-title="true" title="修改手机号" :width="`400px`" :height="`260px`">
      <div class="reset-phone-panel">
        <span>昵称：haop</span>
        <br>
        <span>原手机号：15366552887</span>
        <br>
        <span>修改号码：</span>
        <div class="new-num">
          <w-input :holder="`请填写`"></w-input>
        </div>
      </div>
    </w-panel-fixed-wrap>
    
    <w-panel-fixed-wrap v-model="delOrDis" :panel-title="true" title="提示" :width="`300px`" :height="`254px`" @on-confirm='disabledOrDelete'>
      <div class="reset-pwd-panel">
        <span>确定要{{delParams.type == '1' ? '禁用' : '删除'}}吗？</span>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import StatusItem from '../orderMange/components/orderSearch'
import { apiMemberMange } from 'js/api'
import { mapGetters } from 'vuex'
import { API } from 'js/const'

export default {
  data() {
    return {
      statusList: [
        {
          title: '全部',
          status: ''
        },
        {
          title: '待审核',
          status: ''
        },
        {
          title: '审核不通过',
          status: ''
        },
        {
          title: '普通会员',
          status: ''
        },
        {
          title: '微商',
          status: ''
        },
        {
          title: '网红',
          status: ''
        },
        {
          title: '主播',
          status: ''
        },
        {
          title: '品牌商',
          status: ''
        },
        {
          title: '禁用会员',
          status: ''
        }
      ],
      columns: [
        {title: '会员', width: '32%'},
        {title: '昵称', width: '14%'},
        {title: '会员类型', width: '10%'},
        {title: '登录次数', width: '12%'},
        {title: '是否开店', width: '10%'},
        // {title: '会员申请信息', width: '10%'},
        {title: '操作', width: '12%'}
      ],
      resetPwd: false, // 重置密码弹框
      resetPhone: false, // 重新绑定手机号
      delOrDis: false, // 禁用/删除
      // 查询会员列表 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        mobile: '',
        startTime: '',
        endTime: '',
        trueName: '',
        nickName: '',
        vipRole: '',
        currentPage: '1',
        showCount: '10'
      },
      memberList: [], // 会员列表
      allChecked: false, // 全选 状态
      checkedMember: [], // 选中的会员 集合
      memberType: [], // 会员类型 集合
      // 重置密码 -- 参数
      resetParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        mobile: ''
      },
      // 禁用/删除 会员 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: [],
        type: ''
      }
    }
  },
  components: {
    'status-item': StatusItem
  },
  created() {
    // this._getMemberType()
    this._getMemberList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取会员列表
    _getMemberList() {
      this.queryParams.accessToken = this.token
      apiMemberMange.queryMember(this.queryParams).then(data => {
        if (data.code != '200') return
        this.memberList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getMemberList()
    },
    // 获取 会员类型 集合
    // _getMemberType() {
    //   apiMemberMange.queryType('会员类型').then(data => {
    //     if (data.code != '200') return
    //     this.memberType = data.data.map(item => {
    //       return {
    //         value: item.id,
    //         label: item.dictName
    //       }
    //     })
    //   })
    // },
    // 点击会员的复选框
    changeCheckedStatus() {
      let count = 0
      this.checkedMember = []
      this.memberList.recordList.forEach(v => {
        if (v.isChecked) {
          count++
          this.checkedMember.push(v.id)
        }
      })
      if (count == this.memberList.recordList.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
    },
    changeAllMemberStatus() {
      this.checkedMember = []
      this.memberList.recordList.forEach(v => {
        if (this.allChecked) {
          this.$set(v, 'isChecked', true)
          this.checkedMember.push(v.id)
        } else {
          this.$set(v, 'isChecked', false)
        }
      })
    },
    // 重置密码 提交
    submitReset() {
      this.resetParams.accessToken = this.token
      apiMemberMange.resetPwd(this.resetParams).then(data => {
        if (data.code != '200') return
        this.$toast('重置成功', () => {
          this.resetPwd = false
        })
      })
    },
    disablePanel(type) {
      if (!this.checkedMember.length) {
        this.$toast('请先选择会员')
        return
      }
      this.delOrDis = true
      this.delParams.type = type
    },
    // 禁用 / 删除 会员
    disabledOrDelete () {
      this.delParams.accessToken = this.token
      this.delParams.ids = this.checkedMember
      apiMemberMange.disableOrDelete(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast(`${this.delParams.type == '1' ? '禁用' : '删除'}会员成功`, () => {
          this.delOrDis = false
          this.changePage(1)
        })
      })
    },
    /**
     * 导出
     */
    onExportList() {
      apiMemberMange.exportList(this.queryParams).then(resp => {
        window.location.href = `${API}receptionUser/User/export?accessToken=${this.token}&threeMenuCode=${this.$route.query.three}&mobile=${this.queryParams.mobile}&startTime=${this.queryParams.startTime}&endTime${this.queryParams.endTime}&trueName${this.queryParams.trueName}&nickName=${this.queryParams.nickName}&vipRole=${this.queryParams.vipRole}`
      })
    }
  }
}
</script>

<style lang="scss">
.m-member-list {
  .order-options {
    .btn {
      width: 140px
    }
  }
  .m-search-list {
    .btn {
      width: 70px;
      margin-left: 16px;
    }
  }
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-member-list {
  margin: 30px 0
}
.m-search-options {
  // margin: 0 20px;
  border-bottom: 1px solid $border-gray-light;
  .title {
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .o {
    margin-left: 20px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
    vertical-align: middle;
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin: 48px auto 20px;
    text-align: center;
  }
  .date {
    width: 390px;
    vertical-align: middle;
    & > div {
      width: 170px;
      display: inline-block;
    }
  }
}
.m-search-list {
  margin-top: 10px;
}
.options-btn {
  margin: 30px 0 10px 10px;
  .list-btn {
    margin-left: 10px;
  }
}
.list {
  margin-bottom: 10px;
  .login-info {
    padding: 10px;
    background-color: #f0f0f0;
    font-weight: 600;
    span {
      padding: 0 10px;
    }
  }
  table {
    margin-top: 10px;
    td {
      border: 1px solid #f0f0f0;
      &:nth-child(1) {
        width: 32%
      }
      &:nth-child(2) {
        width: 14%
      }
      &:nth-child(3) {
        width: 10%
      }
      &:nth-child(4) {
        width: 12%
      }
      &:nth-child(5) {
        width: 10%
      }
      &:nth-child(6) {
        width: 12%
      }
    }
  }
  .shop-info {
    padding: 10px 0 10px 10px;
    .shop-logo {
      width: 100px;
      height: 100px;
      // margin-right: 10px;
    }
    .shop-name {
      position: relative;
      width: 68%;
      height: 100px;
      text-align: left;
      display: inline-block;
      & > div {
        line-height: 20px
      }
      .name {
        font-size: 14px;
        font-weight: 600
      }
      .shop-num {
        position: absolute;
        bottom: 0
      }
    }
  }
  .tab-option {
    line-height: 24px;
    text-decoration-line: underline;
    cursor: pointer;
    color: $color-text-bule;
  }
}
.reset-pwd-panel {
  text-align: center
}
.reset-phone-panel {
  width: 250px;
  margin: 0 auto;
  span {
    line-height: 28px;
  }
  .new-num {
    display: inline-block;
  }
}
</style>
